<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <rz-height />
    <rz-height />
    <rz-height />
   <div style="font-size:18px;padding-left:10px;color:#fff" class="right">
    {{new Date().getFullYear()}}年度
   <i v-if="!isFull" class="el-icon-rank" title="点击全屏"
               style="font-size:20px;cursor: pointer;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);"
               @click="JTf11()"
            />
            <i v-else class="el-icon-upload2" itle="退出全屏"
               style="font-size:20px;cursor: pointer;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.9);"
               @click="TCtFull()"
            />
    </div>
    <rz-height />
    <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
        <div class="list">
          <div class="item"  @click="index='15';show=true">
            <img
              style="width: 70px; height: 70px"
              src="@/assets/images/item2.png"
            />
            <div style="color: #f29853; font-size: 20px; font-weight: 700">
              {{ (list1.pcCount/10000||0).toFixed(2)}}万
            </div>
              <rz-height />
            <div>总批次数</div>
          </div>
          <div class="item" @click="index='15';show=true">
            <img
              style="width: 70px; height: 70px"
              src="@/assets/images/item2.png"
            />
            <div style="color: #f29853; font-size: 20px; font-weight: 700">
              {{ list1.dwCount }}
            </div>
                 <rz-height />
            <div>溯源单位数</div>
          </div>
          <div class="item" @click="index='15';show=true">
            <img
              style="width: 70px; height: 70px"
              src="@/assets/images/item2.png"
            />
            <div style="color: #f29853; font-size: 20px; font-weight: 700">
              {{ list1.pzCount }}
            </div>
                 <rz-height />
            <div>覆盖品种数</div>
          </div>
          <div class="item" @click="index='15';show=true">
            <img
              style="width: 70px; height: 70px"
              src="@/assets/images/item2.png"
            />
            <div style="color: #f29853; font-size: 20px; font-weight: 700">
              {{ (list1.zlCount/10000000||0).toFixed(2) }}万
            </div>
                 <rz-height />
            <div>总重量(吨)</div>
          </div>
        </div>
      </div>
      <div :style="note1" @click="()=>{$emit('handle','dialog2')}">农产品溯源</div>
    </dv-border-box-1>
    <rz-height />
    <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
            <rz-height />   
        <el-row :gutter="20">
          <el-col :span="9">
              <div style="display: flex;align-items: center;"  @click="index='16';show=true">
              <span style="height:10px;border-left:3px solid #0E6DE9;margin-right:5px"></span>
               <span>总批次数  &nbsp;</span>
              <span class="number">{{ (list2.pcCount/10000||0).toFixed(2) }}万</span>
             
            </div>
            <rz-height />
            <div style="display: flex;align-items: center;"  @click="index='16';show=true">
              <span style="height:10px;border-left:3px solid #00AF6C;margin-right:5px"></span>
              <span>快检单位数 &nbsp;</span>
              <span class="number">{{ list2.dwCount}}</span>
            </div>
            <rz-height />
               <div style="display: flex;align-items: center; "  @click="index='16';show=true">
              <span style="height:10px;border-left:3px solid #AB4ED3;margin-right:5px"></span>
              <span>覆盖品种数  &nbsp;</span>
              <span class="number">{{ list2.pzCount }}</span>
            </div>
            <rz-height />
                <div style="display: flex;align-items: center;"  @click="index='16';show=true">
              <span style="height:10px;border-left:3px solid #FBD860;margin-right:5px"></span>
              <span >覆盖项目数 &nbsp;</span>
              <span class="number">{{ list2.xmCount }}</span>
            </div>
          </el-col>
          <el-col :span="15">
            <el-row :gutter="20">
              <el-col :span="12">
                <div id="main3" style="width: 100%; height: 120px"></div>
              </el-col>
              <el-col :span="12">
                <div id="main4" style="width: 100%; height: 120px"></div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
            <rz-height />
      </div>
        <div :style="note1" @click="()=>{$emit('handle','dialog4')}">农产品快检</div>
    </dv-border-box-1>
    <rz-height />
    <rz-height />
    <rz-height />
     <dv-border-box-1>
      <div class="content">
          <rz-height />
        <div class="list" style="font-size:14px;font-weight:700">
          <!-- <div class="item"  v-for="(item,index) in dataA" :key="index" @click="handle(item,index)">
            <div >单位数:<span style="color:#E6B336;font-size:18px"> {{item.unitCount}}</span></div>
               <rz-height />
            <div>探头数:  <span style="color:#E6B336;font-size:18px"> {{item.deviceCount}}</span> </div>
            <img
              style="width: 39px;margin-top:15px;margin-bottom:10px"
              src="@/assets/images/item6.png"
            />
            <div>{{item.bodyIndustry}}</div>
          </div> -->


<!-- 小作坊单位数：33 探头数：81
社会餐饮单位数：340 探头数：741
商超单位数：7 探头数：10
单位食堂单位数：197 探头数：774 -->
    <div class="item"  >
            <div >单位数:<span style="color:#E6B336;font-size:18px"> 33</span></div>
               <rz-height />
            <div>探头数:  <span style="color:#E6B336;font-size:18px">81</span> </div>
            <img
              style="width: 39px;margin-top:15px;margin-bottom:10px"
              src="@/assets/images/item6.png"
            />
            <div>小作坊</div>
          </div>


              <div class="item"  >
            <div >单位数:<span style="color:#E6B336;font-size:18px"> 340</span></div>
               <rz-height />
            <div>探头数:  <span style="color:#E6B336;font-size:18px"> 741</span> </div>
            <img
              style="width: 39px;margin-top:15px;margin-bottom:10px"
              src="@/assets/images/item6.png"
            />
            <div>社会餐饮</div>
          </div>

              <div class="item"  >
            <div >单位数:<span style="color:#E6B336;font-size:18px">7</span></div>
               <rz-height />
            <div>探头数:  <span style="color:#E6B336;font-size:18px"> 10</span> </div>
            <img
              style="width: 39px;margin-top:15px;margin-bottom:10px"
              src="@/assets/images/item6.png"
            />
            <div>商超</div>
          </div>

              <div class="item" >
            <div >单位数:<span style="color:#E6B336;font-size:18px"> 197</span></div>
               <rz-height />
            <div>探头数:  <span style="color:#E6B336;font-size:18px"> 774</span> </div>
            <img
              style="width: 39px;margin-top:15px;margin-bottom:10px"
              src="@/assets/images/item6.png"
            />
            <div>集中用餐单位食堂</div>
          </div>

          
        </div>
          <rz-height />
      </div>
        <div :style="note1" @click="()=>{$emit('handle','dialog3')}">互联网+明厨亮灶</div>
    </dv-border-box-1>
    <!-- <dv-border-box-1>
      <div class="content">
        <el-row :gutter="20" justify="center">
          <el-col :span="7">
            <div class="totle" :style="personnel">
              <div class="item1">   <rz-height/>
                <div style="color:#00E0FB;">{{ list3.jyhs }}</div>
                  <rz-height :height="5"/>
                <div>经营户数</div>
                
              </div>
            </div>
            <div class="totle" :style="personnel">
              <div class="item1">   <rz-height/>
                <div style="color:#00E0FB;">{{ (list3.pcCount/10000).toFixed(2) }}万</div>
                  <rz-height :height="5"/>
                <div>进货总批次数</div>
              </div>
            </div>
            <div class="totle" :style="personnel">
              <div class="item1">
                <rz-height/>
                <div style="color:#00E0FB;">{{(list3.zlCount/10000).toFixed(2)}}万</div>
                   <rz-height :height="5"/>
                <div>进货总重量(公斤)</div>
              </div>
            </div>
          </el-col>
          <el-col :span="17" style="padding: 0 40px"
            ><div class="title " style="padding:5px 10px" :style="note">产地分析 <span style="color:#D9498B;font-weight:700">TOP10</span></div>
            <dv-capsule-chart
              v-if="!loading"
              :config="config"
              style="width: 100%; height: 300px"
            />
          </el-col>
        </el-row>
      </div>
             <div :style="note1">批发市场</div>
    </dv-border-box-1> -->
    <rz-height />
        <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
          <rz-height />
        <el-row :gutter="20" style="font-size:14px;font-weight:700">
          <el-col :span="8">
            <div class="totle"  @click="index='17';show=true">
              <img
                style="width: 70px; height: 70px; margin-right: 5px"
                src="@/assets/images/item5.png"
              />
              <div style="display: flex;
    flex-direction: column;
    justify-content: space-between;">
                <div>检验完成批次</div>
                  <rz-height />
                <div style="font-size:18px">{{list5.total}}</div>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="6">
            <div class="totle"  @click="index='17';show=true">
              <img
                style="width: 70px; height: 70px; margin-right: 5px"
                src="@/assets/images/item5.png"
              />
              <div>
                <div>不合格批次</div>
                <div>{{list5.unqualifiednum}}</div>
              </div>
            </div>
          </el-col> -->
          <el-col :span="8">
            <div class="totle"     @click="index='17';show=true">
              <img
                style="width: 70px; height: 70px; margin-right: 5px"
                src="@/assets/images/item5.png"
              />
              <div style="display: flex;
    flex-direction: column;
    justify-content: space-between;">
                <div style="color:#7cffb2">合格率</div>
                     <rz-height />
                <div style="color:#7cffb2;font-size:18px">{{list5.qualifiedrate}}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="totle"  @click="index='17';show=true">
              <img
                style="width: 70px; height: 70px; margin-right: 5px"
                src="@/assets/images/item5.png"
              />
              <div style="display: flex;
    flex-direction: column;
    justify-content: space-between;">
                <div>被抽检单位</div>
                     <rz-height />
                <div style="font-size:18px">{{list5.unitnum}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
          <rz-height />
      </div>
      <div :style="note1">监督抽检</div>
    </dv-border-box-1>
    <!-- <div class="switch_wapper">
      <el-button-group class="switch">
      <el-button
        :type="!isCompany ? 'primary' : ''"
        @click="isCompany = false"
        size="mini"
        class="button"
        >餐饮单位</el-button
      >
      <el-button
        :type="isCompany ? 'primary' : ''"
        @click="isCompany = true"
        size="mini"
        class="button"
        >单位食堂</el-button
      >
    </el-button-group>
    <router-link :to="`/foodSafety/unit/unitRegisterStatistic?code=${code}`" class="link">查看更多</router-link>
  </div>
    <rz-height></rz-height>

    <div style="height: 220px">
      <el-table
        showSummary
        tooltip-effect="light"
        v-if="isCompany"
        :data="companyList"
        rowClassName="row_table"
        cellClassName="cell_table"
        headerCellClassName="header_table"
        align="center"
        headerAlign="center"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          header-align="center"
          prop="bodyIndustryRemarks"
          label="单位业态"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shouldRegister"
          label="应注册"
          width="70"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="registered"
          label="已注册"
          width="60"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="administratorNum"
          label="食安管理员"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="practitionerNum"
          label="从业人员"
          align="right"
          header-align="center"
        >
        </el-table-column>
      </el-table>
      <el-table
        showSummary
        tooltip-effect="light"
        v-else
        rowClassName="row_table"
        cellClassName="cell_table"
        headerCellClassName="header_table"
        headerRowClassName="header_row_table"
        headerAlign="center"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          prop="bodyIndustryRemarks"
          label="单位业态"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shouldRegister"
          label="应注册"
          width="70"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="registered"
          label="已注册"
          width="60"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="administratorNum"
          label="食安管理员"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="practitionerNum"
          label="从业人员"
          width="90"
          align="right"
          header-align="center"
        >
        </el-table-column>
      </el-table>
    </div> -->
           <!-- <dialogs :index="index" :show="show"  @beforeClose="show=false"/> -->
  </div>
</template>
<script>
import {
  statistics,
  purchasebill,
  findFamousChef
} from "@/api/modules/home";
var echarts = require("echarts");
export default {
  // props:[],
  props: {
    code: {
      type: String,
      default: "320500",
    },
  },
  // 页面加载
  created() {
    // this.getList()
    // this.findStatisticalRegistrations();
  },
  // 页面加载完成
  mounted() {
    // this.queryInfo();
    // if (!this.myChartColumnar) {
    //   this.myChartColumnar = echarts.init(
    //     document.getElementById("main_right")
    //   );
    // }
    // if (!this.myChart) {
    //   this.myChart = echarts.init(
    //     document.getElementById("main_chart"),
    //     "dark"
    //   );
    // }

    // Promise.all([
    //   this.findHealthStatistics(),
    //   this.findFoodPerformanceResponse(),
    //   this.findStatisticalRegistrations(),
    //   this.findBodyIndustryRemarks(),
    // ]).then((res) => {
    //   this.data = res[0].data;
    //   this.Columnar();
    //   this.BodyIndustryTotals = res[1].data;
    //   this.pieChart();
    //   this.countRegistrations = res[2].data[0].isAnMainResponse;

    //   this.companyList = res[3].data.filter(
    //     (x) => x.bodyIndustry == "单位食堂"
    //   );
    //   this.tableData = res[3].data.filter(
    //     (x) => x.bodyIndustry == "餐饮服务经营者"
    //   );
    //   this.loading = false;
    // });

    Promise.all([
      this.getList(),
      this.getList1(),
      this.getList2(),
      this.getList3(),
      this.getList4()
    ]).then((res) => {
      this.list1 = res[0].data[0];
      this.list2 = res[1].data[0];
      this.list3 = res[2].data[0];
      this.list4 = res[3].data;
      this.list5 = res[4].data;
      this.config.data = this.list4.map((x) => {
        return {
          name: x.ProductionFrom,
          value: x.pcCount,
        };
      });
      console.log(res);
      // this.Columnar();
      // this.BodyIndustryTotals = res[1].data;
      this.pieChart();
      // this.countRegistrations = res[2].data[0].isAnMainResponse;

      // this.companyList = res[3].data.filter(
      //   (x) => x.bodyIndustry == "单位食堂"
      // );
      // this.tableData = res[3].data.filter(
      //   (x) => x.bodyIndustry == "餐饮服务经营者"
      // );
      this.loading = false;
    });
    this.getListA()
    // this.pieChart();
    // 饼图
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      index:"",
      show:false,
      config: {
        data: [],
        colors: [ "#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9"],
        showValue: true,
      },
      tableData: [],
      companyList: [],
      isCompany: true,
      data: {},
         note1: {
        backgroundImage: "url(" + require("@/assets/images/dai_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
  left: "50%",
  width:'50%',
  textAlign: "center",
  top: "0",
  transform: "translate(-50%,-50%)",
  color:"white",
  fontSize:'14px',
  height:'45px',
  lineHeight: '44px',
     cursor: 'pointer'
      },
      note: {
        backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      personnel: {
        backgroundImage: "url(" + require("@/assets/images/item3.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        backgroundPosition: "10%",
      },
      // register: {
      //   backgroundImage:
      //     "url(" + require("@/assets/images/adyRegister.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      //   backgroundPosition: "bottom",
      // },
      // note: {
      //   backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      // },
      // note1: {
      //   backgroundImage:
      //     "url(" + require("@/assets/images/green_code.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      // },
      // note2: {
      //   backgroundImage:
      //     "url(" + require("@/assets/images/yellow_code.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      // },
      // note3: {
      //   backgroundImage: "url(" + require("@/assets/images/red_code.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      // },
      // note4: {
      //   backgroundImage: "url(" + require("@/assets/images/dai_code.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "100% 100%",
      // },
      // red: {
      //   backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "70% 73%",
      //   backgroundPosition: "bottom",
      // },
      // yellow: {
      //   backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "70% 73%",
      //   backgroundPosition: "bottom",
      // },
      // green: {
      //   backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
      //   backgroundRepeat: "no-repeat",
      //   backgroundSize: "70% 73%",
      //   backgroundPosition: "bottom",
      // },
      // dataBg: {
      //   backgroundColor: "rgba(32,72,136,.1)",
      //   // backgroundImage: "url(" + require("@/assets/images/dataBg.png") + ")",
      //   // backgroundRepeat: "no-repeat",
      //   // backgroundSize: "100% 100%",
      // },
      myChart: "",
      myChartColumnar: "",
      dialogVisible: false,
      type: 0,
      countRegistrations: {},
      loading: true,
      BodyIndustryTotals: {},

      list1: {},
      list2: {},
      list3: {},
      list4: {},
      list5:{},
      dataA:[],
      isFull:false
    };
  },
  // 方法
  methods: {

           JTf11() {
      //全屏
      var docElm = document.getElementById("zzzu1");
      docElm.style.width = "100%"; //.style =
      // docElm.style.height = "100%";
      //W3C
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }

      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }

      //IE11
      else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
      this.isFull = true;
    },
    TCtFull() {
      // 判断各种浏览器，找到正确的方法
      var exitMethod =
        document.exitFullscreen || //W3C
        document.mozCancelFullScreen || //Chrome等
        document.webkitExitFullscreen || //FireFox
        document.webkitExitFullscreen; //IE11
      if (exitMethod) {
        exitMethod.call(document);
      } else if (typeof window.ActiveXObject !== "undefined") {
        //for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
      this.isFull = false;
    },
       async getListA(){
      let { data } = await findFamousChef()
      console.log(data);
      data.forEach(x=>{
       if(x.bodyIndustry=='餐饮服务经营者'){
x.bodyIndustry='社会餐饮'
       }else if(x.bodyIndustry=='食品销售经营者'){
x.bodyIndustry='商超'
       }
      })
      this.dataA=data
    },
    async getList() {
      return await purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_Pur_Big_Data"
      });
    },
    async getList1() {
      return await purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_Quick_Big_Data"
      });
    },
    async getList2() {
      return await purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_Pf_Big_Data"
      });
    },
    async getList3() {
      return await purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_From_Big_Data"
      });
    },

   async getList4() {
      return await statistics();
    },


    //
    pieChart() {
      let option = {
        title: {
          text: this.list2.hgl+'%',
          subtext: "合格率",
          x: "center",
          y: "38%",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: ["#7cffb2"],
          },
          subtextStyle: {
            color: "#7cffb2",
            fontSize: 12,
          },
        },
        color: ["#7cffb2", "#808080"],
        backgroundColor: "transparent",
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["70%", "90%"],
            data: [
              { value: this.list2.hgl, name: "222" },
              { value: 100 - this.list2.hgl, name: "1212" },
            ],
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };

      let option1 = {
        title: {
          text: this.list2.cll+'%',
          subtext: "处理率",
          x: "center",
          y: "38%",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            color: ["#4992FF"],
          },
          subtextStyle: {
            color: "#4992FF",
            fontSize: 12,
          },
        },
        color: ["#4992FF", "#808080"],
        backgroundColor: "transparent",
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["70%", "90%"],
            data: [
              { value: this.list2.cll, name: "2221" },
              { value: 100 - this.list2.cll, name: "12121" },
            ],
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };
      echarts.init(document.getElementById("main3"), "dark").setOption(option);
      echarts.init(document.getElementById("main4"), "dark").setOption(option1);
    },
    findFoodPerformanceResponse() {
      return this.$http.findFoodPerformanceResponse({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.countRegistrations = res.data.countRegistrations;
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    findStatisticalRegistrations() {
      return this.$http.findStatisticalRegistrations({
        params: {
          parentCode: this.code,
        },
      });
    },
    // pieChart() {
    //   // 饼图

    //   // let option = {
    //   //   color: ["#FF0000", "#FFD700", "#008000"],
    //   //   title: {
    //   //     top: 12,
    //   //     text: "食安指数各分值段占比",
    //   //     //  subtext: '各区注册单位数',
    //   //     left: "center",
    //   //     textStyle: {
    //   //       fontSize: 16,
    //   //     },
    //   //   },
    //   //   backgroundColor: "rgba(32,72,136,.1)",
    //   //   tooltip: {
    //   //     trigger: "item",
    //   //     // formatter: "{a} <br/>{b} : {c} ({d}%)",
    //   //     formatter: function (e) {
    //   //       return (
    //   //         "食安指数" +
    //   //         e.data.name +
    //   //         ":" +
    //   //         e.value +
    //   //         "家(" +
    //   //         e.percent +
    //   //         "%)"
    //   //       );
    //   //     },
    //   //   },
    //   //   // legend: {
    //   //   //   orient: "vertical",
    //   //   //   left: "left",
    //   //   //   data: ["姑苏区", "工业园区", "相城区", "昆山市","常熟","张家港市","吴江","吴中","高新"],

    //   //   //   textStyle: {
    //   //   //     color: "white",
    //   //   //   },
    //   //   // },
    //   //   series: [
    //   //     {
    //   //       name: "注册占比",
    //   //       type: "pie",
    //   //       radius: ["45%", "60%"],
    //   //       center: ["50%", "65%"],
    //   //       data: [
    //   //         {
    //   //           value: Object.values(this.BodyIndustryTotals.man0079).reduce(
    //   //             (acc, cur) => acc + cur
    //   //           ),
    //   //           name: "0-79",
    //   //           color: ["#00000"],
    //   //         },
    //   //         {
    //   //           value: Object.values(this.BodyIndustryTotals.man7990).reduce(
    //   //             (acc, cur) => acc + cur
    //   //           ),
    //   //           name: "80-89",
    //   //         },
    //   //         {
    //   //           value: Object.values(this.BodyIndustryTotals.man9000).reduce(
    //   //             (acc, cur) => acc + cur
    //   //           ),
    //   //           name: "90+",
    //   //         },
    //   //       ],
    //   //       // [
    //   //       //   { value: 335, name: "姑苏区" },
    //   //       //   { value: 310, name: "工业园区" },
    //   //       //   { value: 234, name: "相城区" },
    //   //       //   { value: 935, name: "昆山市" },
    //   //       //   { value: 935, name: "常熟" },
    //   //       //   { value: 935, name: "张家港市" },
    //   //       //   { value: 935, name: "吴江" },
    //   //       //   { value: 935, name: "吴中" },
    //   //       //   { value: 935, name: "高新" },
    //   //       // ]

    //   //       emphasis: {},
    //   //       label: {
    //   //         color: "#fff",
    //   //       },
    //   //       //
    //   //     },
    //   //   ],
    //   // };
    //   let option = {
    //     //  grid: {
    //     //   left: "15%",
    //     //   bottom: "25%",
    //     //   top: "25%",
    //     //   right:"20%"
    //     // },
    //     legend: {
    //       top: 10,
    //       data: ["90-100", "80-89", "70-79", "60-69", "0-59"],
    //       textStyle: {
    //         color: "white",
    //       },
    //     },
    //     // color: ["#008000", "#FFD700", "#FF0000"],
    //     color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
    //     backgroundColor: "rgba(32,72,136,.1)",
    //     // title: {
    //     //     text: '南丁格尔玫瑰图',
    //     //     subtext: '纯属虚构',
    //     //     left: 'center'
    //     // },
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{b} : {c} ({d}%)",
    //     },
    //     // legend: {
    //     //     left: 'center',
    //     //     top: 'bottom',
    //     //     data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
    //     // },
    //     // toolbox: {
    //     //   show: true,
    //     //   feature: {
    //     //     mark: { show: true },
    //     //     dataView: { show: true, readOnly: false },
    //     //     magicType: {
    //     //       show: true,
    //     //       type: ["pie", "funnel"],
    //     //     },
    //     //     restore: { show: true },
    //     //     saveAsImage: { show: true },
    //     //   },
    //     // },
    //     series: [
    //       // {
    //       //     name: '半径模式',
    //       //     type: 'pie',
    //       //     radius: [20, 110],
    //       //     center: ['25%', '50%'],
    //       //     roseType: 'radius',
    //       //     label: {
    //       //         show: false
    //       //     },
    //       //     emphasis: {
    //       //         label: {
    //       //             show: true
    //       //         }
    //       //     },
    //       //     data: [
    //       //         {value: 10, name: 'rose1'},
    //       //         {value: 5, name: 'rose2'},
    //       //         {value: 15, name: 'rose3'},
    //       //         {value: 25, name: 'rose4'},
    //       //         {value: 20, name: 'rose5'},
    //       //         {value: 35, name: 'rose6'},
    //       //         {value: 30, name: 'rose7'},
    //       //         {value: 40, name: 'rose8'}
    //       //     ]
    //       // },
    //       {
    //         name: "面积模式",
    //         type: "pie",
    //         radius: [20, 70],
    //         center: ["50%", "50%"],
    //         roseType: "area",
    //         data: [
    //           { value: this.BodyIndustryTotals.fractionOne,Proportion:this.BodyIndustryTotals.percentageOne, name: "90-100" },
    //           { value: this.BodyIndustryTotals.fractionTwo,Proportion:this.BodyIndustryTotals.percentageTwo, name: "80-89" },
    //           { value: this.BodyIndustryTotals.fractionThree,Proportion:this.BodyIndustryTotals.percentageThree, name: "70-79" },
    //           { value: this.BodyIndustryTotals.fractionFour,Proportion:this.BodyIndustryTotals.percentageFour, name: "60-69" },
    //           { value: this.BodyIndustryTotals.fractionFive,Proportion:this.BodyIndustryTotals.percentageFive, name: "0-59" },
    //         ],
    //          hoverAnimation: false,
    //          label: {
    //           color: "#fff",
    //           show: true,
    //           		formatter: function(e) {
    //                         return `${e.data.value}家(${e.data.Proportion})`
    //   					},
    //         },

    //         //   itemStyle: {
    //         //     normal: {
    //         //         borderColor: "#00ffff",
    //         //         borderWidth: 12,
    //         //     },

    //         //     emphasis: {
    //         //         borderColor: "#00ffff",
    //         //         borderWidth: 2,
    //         //              shadowBlur: 8,
    //         //     borderColor: "#00ffff",
    //         //     shadowColor: "#00ffff",
    //         //     },
    //         // },
    //       },
    //     ],
    //   };
    //   // 使用刚指定的配置项和数据显示图表。
    //   this.myChart.setOption(option);
    // },
    Columnar() {
      // var option = {
      //   title: {
      //     top: 13,
      //     text: "信息码状态分析",
      //     //  subtext: '各区注册单位数',
      //     left: "center",
      //     textStyle: {
      //       fontSize: 16,
      //       color: "#ffffff",
      //       height: 50,
      //     },
      //   },
      //   backgroundColor: "rgba(32,72,136,.1)",
      //   tooltip: {
      //     trigger: "axis",

      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   legend: {
      //     top: "15%",
      //     data: ["即将到期", "已到期", "待完善"],
      //     textStyle: {
      //       color: "white",
      //     },
      //   },
      //   toolbox: {
      //     show: false,
      //     feature: {
      //       dataView: {
      //         show: true,
      //         readOnly: false,
      //       },
      //       magicType: {
      //         show: true,
      //         type: ["bar"],
      //       },
      //       restore: {
      //         show: true,
      //       },
      //       saveAsImage: {
      //         show: true,
      //       },
      //     },
      //   },
      //   calculable: true,
      //   xAxis: [
      //     {
      //       axisLine: {
      //         lineStyle: {
      //           color: "white", //坐标轴的颜色
      //         },
      //       },
      //       type: "category",
      //       data: ["身份证", "健康证明", "安全考试"],
      //     },
      //   ],
      //   grid: {
      //     left: "20%",
      //     bottom: "8%",
      //     top: "35%",
      //   },
      //   yAxis: [
      //     {
      //       type: "value",
      //       name: "人数",
      //       // min: 0,
      //       // max: Math.max(...maxdata),
      //       // interval: Math.max(...maxdata)/10,
      //       axisLabel: {
      //         // textStyle: {
      //         //   color: "white", //坐标的字体颜色
      //         // },
      //         formatter: "{value} ",
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: "white", //坐标轴的颜色
      //         },
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //     },
      //   ],

      //   series: [
      //     // {
      //     //   name: "未到期",
      //     //   type: "bar",
      //     //   data: [ this.data.jKGreen, this.data.kSGreen],
      //     //   barWidth: 15,
      //     //   color: ["#008000"],
      //     //   label: {
      //     //     show: true,
      //     //     position: "top",
      //     //     color: "#fff",
      //     //   },
      //     // },

      //     {
      //       name: "即将到期",
      //       type: "bar",
      //       data: [
      //         this.data.dabhYellow,
      //         this.data.jKYellow,
      //         this.data.kSYellow,
      //       ],
      //       barWidth: 15,
      //       color: ["#FFD700"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //     {
      //       name: "已到期",
      //       type: "bar",
      //       data: [
      //         this.data.dabhRed,
      //         this.data.jKRed,
      //         this.data.kSRed,
      //         // this.data.dabhYellow,
      //         // this.data.dabhGreen,
      //       ],
      //       barWidth: 15,
      //       color: ["#FF0000"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //     {
      //       name: "待完善",
      //       type: "bar",
      //       data: [this.data.dabhEmpty, this.data.jKEmpty, this.data.kSEmpty],
      //       barWidth: 15,
      //       color: ["#0071F9"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //   ],
      // };

      //     var data = [
      //       {
      //         name: "已到期",
      //         value: 70,
      //       },
      //       {
      //         name: "即将到期",
      //         value: 68,
      //       },
      //       {
      //         name: "待完善",
      //         value: 48,
      //       },
      //     ];

      //     let option = {
      //        title: [ {
      //       subtext: '身份证',
      //       left: '16.67%',
      //       top: '75%',
      //       textAlign: 'center',
      //       subtextStyle:{
      //         color: "white",
      //          fontSize: 12
      //       }
      //   }, {
      //       subtext: '健康证',
      //       left: '50%',
      //       top: '75%',
      //       textAlign: 'center',
      //       subtextStyle:{
      //         color: "white",
      //          fontSize: 12
      //       }
      //   }, {
      //       subtext: '安全考试',
      //       left: '83.33%',
      //       top: '75%',
      //       textAlign: 'center',
      //       subtextStyle:{
      //         color: "white",
      //          fontSize: 12
      //       }
      //   }],
      //       backgroundColor: "rgba(32,72,136,.1)",
      //       tooltip: {
      //         trigger: "item",
      //         formatter: "{a} <br/>{b} : {c} 占比({d}%)",
      //       },
      //       legend: {
      //         orient: "horizontal",
      //         left: 80,
      //         top: 10,
      //         data: ["已到期", "即将到期", "待完善"],
      //         textStyle: {
      //           color: "white",
      //         },
      //       },
      //       // title: [{
      //       //     text: 'Pie label alignTo'
      //       // }, {
      //       //     subtext: 'alignTo: "none" (default)',
      //       //     left: '16.67%',
      //       //     top: '75%',
      //       //     textAlign: 'center'
      //       // }, {
      //       //     subtext: 'alignTo: "labelLine"',
      //       //     left: '50%',
      //       //     top: '75%',
      //       //     textAlign: 'center'
      //       // }, {
      //       //     subtext: 'alignTo: "edge"',
      //       //     left: '83.33%',
      //       //     top: '75%',
      //       //     textAlign: 'center'
      //       // }],
      //       color: ["#ff0000", "#ffd700", "#1890ff"],
      //       series: [
      //         {
      //           name: "身份证",
      //           type: "pie",
      //           radius: ["45%", "60%"],
      //           center: ["50%", "50%"],
      //           data: [
      //             {
      //               name: "已到期",
      //               value: this.data.dabhRed,
      //             },
      //             {
      //               name: "即将到期",
      //               value: this.data.dabhYellow,
      //             },
      //             {
      //               name: "待完善",
      //               value: this.data.dabhEmpty,
      //             },
      //           ],
      //           animation: true,
      //           // label: {
      //           //   position: "outer",
      //           //   alignTo: "none",
      //           //   bleedMargin: 5,
      //           // },
      //           left: 0,
      //           right: "66.6667%",
      //           top: 0,
      //           bottom: 0,
      //           hoverAnimation: false,
      //           // itemStyle: {
      //           //   // normal: {
      //           //   //   label: {
      //           //   //     show: true, //隐藏文字
      //           //   //   },
      //           //   //   labelLine: {
      //           //   //     show: false, //隐藏指示线
      //           //   //   },
      //           //   // },
      //           //   normal: {
      //           //     borderWidth: 3, // 间距的宽度
      //           //     borderColor: "#0D1d50", //背景色
      //           //     label: {
      //           //       show: false, //隐藏文字
      //           //     },
      //           //     labelLine: {
      //           //       show: false, //隐藏指示线
      //           //     },
      //           //             borderWidth: 3, // 间距的宽度
      //           //     borderColor: "#0D1d50", //背景色
      //           //     opacity:0.8
      //           //   },
      //           // },
      //           // label: {
      //           //   color: "#fff",
      //           //   show: true,
      //           //   formatter: function (params) {
      //           //     return "身份证";
      //           //   },

      //           //   position: "center",
      //           // },
      //              label: {
      //             color: "#fff",
      //             show: true,
      //             // formatter: function (params) {
      //             //   return "健康证";
      //             // },
      //             position: "outside",
      //             fontSize:8,
      //           },
      //           labelLine:{
      //             show:true,
      //             smooth:true
      //           },
      //           itemStyle: {
      //             borderColor: "#0D1d50",
      //             borderWidth: 4,
      //           },
      //           // label: {
      //           //   normal: {
      //           //     formatter: function (params) {
      //           //       return "身份证";
      //           //     },

      //           //     position: "center",
      //           //     show: true,
      //           //     textStyle: {
      //           //       fontSize: "10",
      //           //       fontWeight: "normal",
      //           //       color: "#fff"
      //           //     },
      //           //   },
      //           // },
      //           avoidLabelOverlap: true,
      //         },
      //         {
      //             labelLine:{
      //             show:true,
      //           },
      //           name: "健康证",

      //           type: "pie",
      //           radius: ["45%", "60%"],
      //           center: ["50%", "50%"],
      //           data: [
      //             {
      //               name: "已到期",
      //               value: this.data.jKRed,
      //             },
      //             {
      //               name: "即将到期",
      //               value: this.data.jKYellow,
      //             },
      //             {
      //               name: "待完善",
      //               value: this.data.jKEmpty,
      //             },
      //           ],
      //           animation: true,
      //           // label: {
      //           //   position: "outer",
      //           //   alignTo: "labelLine",
      //           //   bleedMargin: 5,
      //           // },
      //           left: "33.3333%",
      //           right: "33.3333%",
      //           top: 0,
      //           bottom: 0,
      //           hoverAnimation: false,
      //           // itemStyle: {
      //           //   normal: {
      //           //     label: {
      //           //       show: true, //隐藏文字
      //           //     },
      //           //     labelLine: {
      //           //       show: true, //隐藏指示线
      //           //     },
      //           //             borderWidth: 3, // 间距的宽度
      //           //     borderColor: "#0D1d50", //背景色
      //           //     opacity:0.8
      //           //   },
      //           // },
      //           // label: {
      //           //   normal: {
      //           //     formatter: function (params) {
      //           //       return "健康证";
      //           //     },

      //           //     position: "center",
      //           //     show: true,
      //           //     textStyle: {
      //           //       fontSize: "10",
      //           //       fontWeight: "normal",
      //           //         color: "#fff"
      //           //     },
      //           //   },
      //           // },
      //           label: {
      //             color: "#fff",
      //             show: true,
      //             // formatter: function (params) {
      //             //   return "健康证";
      //             // },
      //             position: "inside",
      //             fontSize:8,
      //           },
      // //  label: {
      // //             position: "outer",
      // //             alignTo: "labelLine",
      // //             bleedMargin: 5,
      // //           },

      //           itemStyle: {
      //             borderColor: "#0D1d50",
      //             borderWidth: 4,
      //           },
      //         },
      //         {
      //           name: "安全考试",

      //           type: "pie",
      //           radius: ["45%", "60%"],
      //           center: ["50%", "50%"],
      //           data: [
      //             {
      //               name: "已到期",
      //               value: this.data.kSRed,
      //             },
      //             {
      //               name: "即将到期",
      //               value: this.data.kSYellow,
      //             },
      //             {
      //               name: "待完善",
      //               value: this.data.kSEmpty,
      //             },
      //           ],
      //           animation: true,
      //           // label: {
      //           //   position: "outer",
      //           //   alignTo: "edge",
      //           //   margin: 20,
      //           // },
      //           left: "66.6667%",
      //           right: 0,
      //           top: 0,
      //           bottom: 0,
      //           hoverAnimation: false,
      //           // itemStyle: {
      //           //   normal: {
      //           //     label: {
      //           //       show: true, //隐藏文字
      //           //     },
      //           //     labelLine: {
      //           //       show: true, //隐藏指示线
      //           //     },
      //           //             borderWidth: 3, // 间距的宽度
      //           //     borderColor: "#0D1d50", //背景色
      //           //     opacity:0.8

      //           //   },
      //           // },
      //           // label: {
      //           //   normal: {
      //           //     formatter: function (params) {
      //           //       return "安全考试";
      //           //     },
      //           //     position: "center",
      //           //     show: true,
      //           //     textStyle: {
      //           //       fontSize: "10",
      //           //       fontWeight: "normal",
      //           //         color: "#fff"
      //           //     },
      //           //   },
      //           // },
      //           // label: {
      //           //   color: "#fff",
      //           //   show: true,
      //           //   formatter: function (params) {
      //           //     return "安全考试";
      //           //   },

      //           //   position: "center",
      //           // },
      //              label: {
      //             color: "#fff",
      //             show: true,
      //             // formatter: function (params) {
      //             //   return "健康证";
      //             // },
      //             position: "inside",
      //             fontSize:8,
      //           },
      //           itemStyle: {
      //             borderColor: "#0D1d50",
      //             borderWidth: 4,
      //           },
      //         },
      //       ],
      //     };

      let option = {
        color: ["#ff0000", "#ffd700", "#1890ff"],
        backgroundColor: "rgba(32,72,136,.1)",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 10,
        //     data: ['直达', '营销广告', '搜索引擎']
        // },

        legend: {
          orient: "horizontal",
          top: 5,
          data: ["已到期", "即将到期", "待完善"],
          // ["已到期", "即将到期", "待完善"]
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: "身份证",
            top: "10%",
            type: "pie",
            radius: ["75%", "90%"],
            labelLine: {
              show: false,
            },
            data: [
              {
                name: "已到期",
                value: this.data.dabhRed,
              },
              {
                name: "即将到期",
                value: this.data.dabhYellow,
              },
              {
                name: "待完善",
                value: this.data.dabhEmpty,
              },
            ],
            hoverAnimation: false,
            label: {
              show: true,
              position: "inside",
              color: "#fff",
              fontWeight: 700,
              formatter: function (e) {
                if (e.name == "即将到期") {
                  return "身份证";
                } else {
                  return "";
                }
              },
            },
            labelLine: {
              show: true,
            },
          },
          {
            top: "10%",
            name: "健康证明",
            type: "pie",

            radius: ["45%", "60%"],
            labelLine: {
              show: false,
            },
            data: [
              {
                name: "已到期",
                value: this.data.jKRed,
              },
              {
                name: "即将到期",
                value: this.data.jKYellow,
              },
              {
                name: "待完善",
                value: this.data.jKEmpty,
              },
            ],
            hoverAnimation: false,
            label: {
              show: true,
              position: "inside",
              color: "#ffffff",
              fontWeight: 700,

              formatter: function (e) {
                if (e.name == "即将到期") {
                  return "健康证明";
                } else {
                  return "";
                }
              },
            },
          },
          {
            top: "10%",
            name: "食安考试",
            type: "pie",
            radius: ["15%", "30%"],

            labelLine: {
              show: false,
            },
            data: [
              {
                name: "已到期",
                value: this.data.kSRed,
              },
              {
                name: "即将到期",
                value: this.data.kSYellow,
              },
              {
                name: "待完善",
                value: this.data.kSEmpty,
              },
            ],
            hoverAnimation: false,
            label: {
              show: true,
              position: "inside",
              color: "#fff",
              fontWeight: 700,

              formatter: function (e) {
                if (e.name == "待完善") {
                  return "食安考试";
                } else {
                  return "";
                }
              },

              // },

              // },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChartColumnar.setOption(option);
    },
    findHealthStatistics() {
      return this.$http.findHealthStatistics({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.data = res.data;
      //     this.pieChart();
      //     this.Columnar();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    onconfirm() {
      this.dialogVisible = false;
    },
    showTable(e) {
      // this.type=e
      //  this.dialogVisible = true;
      this.$router.push({
        name: "query",
        query: { code: this.code, type: e + "" },
      });
    },
    findBodyIndustryRemarks() {
      return this.$http.findBodyIndustryRemarks({
        params: {
          parentCode: this.code,
        },
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "query-dialog": () => import("@/views/monitoring/components/query"),
    // dialogs: () => import("@/views/home/home/components/dialog"),
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
// .container {
//   height: 100%;
//   .top {
//     padding: 10px 0 0 0;
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: space-evenly;
//     .item {
//       display: flex;
//       flex-direction: column;
//       align-items: center;
//       height: 100px;
//       flex: 1;
//       cursor: pointer;
//       // max-width: 100px;
//       .iten_son {
//         min-width: 70px;
//         min-height: 70px;
//         display: flex;
//         align-items: flex-start;
//         text-align: center;
//         justify-content: center;
//         color: #4adefe;
//         border-radius: 50%;
//         font-size: 20px;
//         // border: 5px  solid #62BCE1;
//       }
//       .text {
//         color: #fff;
//       }
//     }
//   }
//   .red {
//     color: #ff0000;
//     text-align: center;
//   }
//   .yellow {
//     color: #ffd700;
//     text-align: center;
//   }
//   .green {
//     color: #08e80f;
//     text-align: center;
//   }
//   /deep/.row_table {
//     background-color: transparent;
//   }
//   /deep/ .cell_table {
//     padding: 3px;
//   }
//   /deep/ .header_table {
//     padding: 0;
//     font-size: 12px;
//     background-color: transparent;
//   }
//   /deep/ .el-table,
//   .el-table__cell {
//     background-color: transparent;
//   }

//   /deep/ .el-table__cell {
//     border: none !important;
//     color: #fff;
//   }
//   /deep/ .el-table tr {
//     background-color: transparent !important;
//   }
//   /deep/ .el-table__row:hover > td {
//     background-color: transparent !important;
//   }
//   /deep/ .el-table::before {
//     height: 0;
//   }
//   .button {
//     padding: 5px;
//   }
//   /deep/.el-table__cell {
//     padding: 0;
//   }
//   /deep/ .el-table__cell {
//     background-color: transparent !important;
//   }
//   .switch_wapper {
//     display: flex;
//     justify-content: space-between;
//     .link {
//       color: #1890ff;
//       text-decoration: underline;
//     }
//   }

//   .title {
//     width: 40%;
//     text-align: left;
//     color: #ffffff;
//     padding: 8px 35px;
//   }
//   .list {
//     background: rgba(32, 72, 136, 0.1);
//     display: flex;
//     justify-content: space-around;
//     padding: 10px;
//     font-size: 13px;
//     .item {
//       display: flex;
//       // flex-basis: 100px;
//       color: #ffffff;
//       padding: 5px;
//       text-align: center;
//       cursor: pointer;
//     }
//   }
// }
.container {
  height: 100%;
  color: #2ba1e8;
  font-size: 12px;
  .dv-border-box-1 {
    height: auto;
    .content {
      padding: 30px 20px;
      color: white;
      .number {
        font-size:20px;
        font-weight: 700;
        margin-right: 10px;
        color: #00E4FD;
      }
      .list {
        display: flex;
        justify-content: space-around;
        .item {
          flex: 1;
          // height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          div {
            text-align: center;
          }
          // cursor: pointer;
          color: white;
        }
      }
      .totle {
        width: 100%;
        display: flex;
        align-items: center;
        // .item1 {
        //   height: 100%;
        //   display: flex;
        //   justify-content:start;
        //   align-items: center;
        //   flex-direction: column;
        //   :nth-child(2) {
        //     color: green;
        //     font-size: 20px;
        //   }
        // }
      }
    }
  }
   /deep/ .unit-label{
    display: none;
  }
 /deep/  .label-column :nth-last-child(1){
    display: none;
  }
  
}
</style>
